<template>
	<view>
		<swiper class='lunbo' :indicator-dots='true' indicator-color="#bbb" 
			indicator-active-color="#fff" :autoplay='true' interval='5000' :snap-to-edge="true">
			<navigator :url="'/pages/detail/detail?p='+ item.article_id" 
				v-for="item in moreLikeArticleList" :key="item.article_id">
				<swiper-item>
					<image :src='item.cover_image' class="header-image"></image>
				</swiper-item>
			</navigator>
		</swiper>
		<scroll-view scroll-x="true" class="category" :scroll-left="toLeft" scroll-with-animation="true">
			<view :class="{'category-item': true, 'category-item-active': !cid}" @click="cid = null">首页</view>
			<view :class="{'category-item': true, 'category-item-active': cid == item.category_id}" v-for="item in categoryList"
			 :key="item.category_id" @click="cid = item.category_id">
				{{ item.category_name }}
			</view>
		</scroll-view>
		<view class="article" @touchstart="start" @touchend="end">
			<navigator 
				:url="'/pages/detail/detail?p='+ item.article_id"
				v-for="item in articleList" :key="item.article_id">
				<view class="article-item">
					<view class="article-simp">
						<view class="article-title">{{ item.article_title }}</view>
						<view class="article-other">
							<view class="article_time">{{ item.add_time | dateFormat }}</view>
							<!-- 评论数 -->
							<view class="list-zan">
								<text>{{ item.comment_num }}</text>
								<image src="/static/images/comment.png" class="list-zan-img"></image>
							</view>
							<!-- 点赞数 -->
							<view class="list-zan">
								<text>{{ item.like_num }}</text>
								<image src="/static/images/like.png" class="list-zan-img"></image>
							</view>
						</view>
					</view>
					<image :src="item.cover_image" class="cover_img"></image>
				</view>
			</navigator>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				categoryList: [],
				cid: null,
				articleList: [],
				page: 1,
				page_size: 8,
				total: 0,
				startData: {
					clientX: null,
					clientY: null,
				},
				toLeft: 0,
				likeNumList: 0,
				moreLikeArticleList: []
			}
		},
		onPullDownRefresh: function() {
			// this.page = 1;
			// this.articleList = []
			// this.getArticleList()
			// uni.stopPullDownRefresh()
		},
		onReachBottom: function() {
			let pageTotal = Math.ceil(this.total / this.page_size)
			if (this.page >= pageTotal) {
				uni.showToast({
					'title': '数据到底了',
					'icon': 'none'
				})
				return;
			}
			this.page++;
			this.getArticleList()
		},
		computed: {
			cidList: function() {  // 分类id列表
				let list = []
				for (let item of this.categoryList) {
					list.push(item.category_id)
				}
				return list;
			},
			nowCategory: function() {
				let index = this.cidList.indexOf(this.cid);
				this.toLeft = index < 2 ? 0 : (index*45);
				// return index;
			}
		},
		methods: {
			start(e) {
				this.startData.clientX = e.changedTouches[0].clientX;
				this.startData.clientY = e.changedTouches[0].clientY;
			},
			end(e) {
				// console.log(e)
				const subX = e.changedTouches[0].clientX - this.startData.clientX;
				const subY = e.changedTouches[0].clientY - this.startData.clientY;
				if (subY > 50 || subY < -50) {
					// console.log('上下滑')
				} else {
					let index = this.cidList.indexOf(this.cid)
					if (subX > 50) {
						// console.log('右滑')
						if (index == -1) {
							return;
						}
						if (index == 0) {
							this.cid = null;
							return;
						}
						this.cid = this.cidList[--index]

					} else if (subX < -50) {
						// console.log('左滑')
						if (index == -1) {
							this.cid = this.cidList[0]
							return;
						}
						if (index == this.cidList.length - 1) {
							return;
						}
						this.cid = this.cidList[++index]
					} else {
						// console.log('无效')
					}
				}
			},
			getCategoryList: function() {
				uni.showLoading({
					'title': '数据加载中...'
				})
				uni.request({
					url: 'https://blog.lgdweb.com/api/category/',
					success: res => {
						this.categoryList = res.data.data.categoryList;
					},
					fail: err => {
						console.log(err)
					}
				})
			},
			getArticleList: function() {
				uni.showLoading({
					'title': '数据加载中...'
				})
				let data = {
					page: this.page,
					page_size: this.page_size
				};
				if (this.cid) {
					data.class = this.cid
				}
				uni.request({
					url: 'https://blog.lgdweb.com/api/article/index/',
					data: data,
					method: 'GET',
					success: res => {
						uni.hideLoading()
						if (res.data.data.articleList.length <= 0) {
							uni.showToast({
								'title': '未找到文章',
								'icon': 'error'
							})
							return;
						}
						this.articleList.push(...res.data.data.articleList);
						
						this.moreLikeArticleList = res.data.data.moreLikeArticleList
						this.total = res.data.data.total;
					},
					fail: err => {
						console.log(err)
						uni.showToast({
							'title': '发生错误',
							'icon': 'error'
						})
					},
					complete: function() {
						uni.stopPullDownRefresh()
					}
				})
			}
		},
		watch: {
			cid: function(cid) {
				this.page = 1
				this.articleList = []
				this.getArticleList()
			}
		},
		onLoad() {
			this.getCategoryList();
			this.getArticleList();
		},
		onShareAppMessage(res) {  // 分享给朋友
		    return {
		      title: '雾屿博客',
		      path: '/pages/list/list'
		    }
		},
		onShareTimeline() {
			return {
			  title: '雾屿博客',
			  path: '/pages/list/list',
			  imageUrl: '/static/images/logo.jpg'
			}
		}
	}
</script>

<style>
	@import url("/static/css/list.css");
</style>
